<template>
  <div class="nowadaysSetPlan">
    <!--    地图 B-->
    <Bmap ref='baseMap' v-on:apt="accept"></Bmap>
    <!--    地图 E-->
    <!--弹窗 B-->
    <div class="pp">
      <div class="bt">
        <span
          :style="sr==0?'background-color: #00CC46;color:#FFFFFF':'background-color: #f9f9fa;color:#b4b4b5' "
          @click="sr=0"
          class='custombtn' style="display: inline-block">布设进度</span>
        &nbsp;
        &nbsp;
        <span
          :style="sr==1?'background-color: #00CC46;color:#FFFFFF':'background-color: #f9f9fa;color:#b4b4b5' "
          @click="sr=1"
          class='custombtn' style="display: inline-block">回收进度</span>

        <img
          @click="gocrb"
          style="margin-left: .6rem;cursor: pointer"
          src="../../static/images/icon/gb.png" alt="">
      </div>

      <div class="pcr">
        <!--进度 B-->
        <table v-show="sr==0">
          <thead>
          <th>计划布设网格编号</th>
          <th>完成情况</th>
          </thead>
          <tbody>
          <tr v-for="wc in finishLayDetail">
            <td>{{wc.number}}</td>
            <td>{{wc.x}}/{{wc.y}}</td>
          </tr>
          </tbody>
        </table>
        <!--进度 E-->

        <!--回收 B-->
        <table v-show="sr ==1">
          <thead>
          <th>计划回收卡编号</th>
          <th>完成情况</th>
          </thead>
          <tbody>
          <tr v-for="fr in finishRecovDetail">
            <td>{{fr.number}}</td>
            <td v-if="fr.data == 'doing'">进行中</td>
            <td v-if="fr.data == 'done'">已完成</td>
          </tr>
          </tbody>
        </table>
        <!--回收 E-->
      </div>


    </div>
    <!--弹窗 E-->

    <!--弹窗2 B-->
    <div class="pp2">
      <el-row>
        <el-col :span="14">
          <el-select v-model="timeq" clearable @change="changeTime" placeholder="请选择时间">
            <el-option
              v-for="item in timequantum"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="10">
          <span style="line-height: .4rem;font-size: .18rem">&nbsp;&nbsp;已完成:{{progress}}%</span>
        </el-col>
      </el-row>
      <br>
      <el-row>
        <el-col :span="14">
          &nbsp;
          <span class="sf" style="background-color: #6200ea;"></span>
          &nbsp;
          <span style="color: #919192">计划回收({{realRecovNum}}/{{planRecovNumber}})</span>
        </el-col>
        <el-col :span="10">
          &nbsp;
          <span class="sf" style="background-color: #00c853;"></span>
          &nbsp;
          <span style="color: #919192">回收完成</span>
        </el-col>
      </el-row>
      <br>
      <el-row>
        <el-col :span="14">
          &nbsp;
          <span class="sf" style="background-color: #2962ff;"></span>
          &nbsp;
          <span style="color: #919192">计划布设({{realLayNum}}/{{planLayNumber}})</span>
        </el-col>

        <el-col :span="10">
          &nbsp;
          <span class="sf" style="background-color: #00e5ff;"></span>
          &nbsp;
          <span style="color: #919192">布设完成</span>
        </el-col>
      </el-row>

    </div>
    <!--弹窗2 E-->
  </div>
</template>
<script>
  import api from '../utils/api'
  import http from '../utils/http'
  import Bmap from './Map'
  export default{
    components: {
      'Bmap': Bmap
    },
    data(){
      return {
        areaId: "",
        sr: 0,
        pset: [],
        timeq: "",
        timequantum: [
          {
            label: "",
            value: ""
          }
        ],
        progress: 0,
        realRecovNum: 0,
        planRecovNumber: 0,
        realLayNum: 0,
        planLayNumber: 0,
        finishLayDetail: [],
        finishRecovDetail: [],
        gridsData: []
      }
    },
    created(){
      this.areaId = sessionStorage.getItem('areaId');
      this.gettimeq();

    },
    mounted(){
      this.$refs.baseMap.creationMap();
      this.getGrids()
    },
    methods: {
      accept(data){

      },
      //改变时间
      changeTime(){
        this.getspd();
      },
      //获取网格
      getGrids() {
        var vm = this;
        (async function () {
          let res = await http.get(api.infrared.grids, {
            areaId: vm.areaId,
            level: "1KM"
          })
          var grids = [];
          res.data.forEach(t => {
            var z = {
              id: t.gridNumber,
              name: t.gridNumber,
              textColor: "#a78839",
              borderColor: "#ffffff",
              fillColor: "rgba(0,0,0,0.1)",
              data: {},
              geojson: t.geojson
            }
            grids.push(z);
          })
          vm.allGrids = res.data;
          if (grids.length != 0) {
            vm.$refs.baseMap.previewshape(grids, "progressgrids");
          }

          vm.getspd(res.data);

        })()
      },
      //获取布设数据
      getspd(data){
        var vm = this;
        (async function () {
          let res = await http.get(api.infrared.findOne, {
            areaId: vm.areaId,
            id: vm.timeq
          })

          let num = Math.ceil((res.data.realRecovNum + res.data.realLayNum) / (res.data.planRecovNumber + res.data.planLayNumber) * 100);
          vm.progress = num;

          vm.planLayNumber = res.data.planLayNumber//计划布设
          vm.planRecovNumber = res.data.planRecovNumber//计划回收
          vm.realLayNum = res.data.realLayNum//已经布设
          vm.realRecovNum = res.data.realRecovNum//已经回收

          var finishLayDetail = [];
          for (var k in res.data.finishLayDetail) {
            var z = {
              number: k,
              x: res.data.finishLayDetail[k].tip.split("/")[0],
              y: res.data.finishLayDetail[k].tip.split("/")[1]
            }
            finishLayDetail.push(z);
          }
          vm.finishLayDetail = finishLayDetail;

          var finishRecovDetail = [];
          for (var k in  res.data.finishRecovDetail) {
            var z = {
              number: k,
              data: res.data.finishRecovDetail[k]
            }
            finishRecovDetail.push(z);
          }
          vm.finishRecovDetail = finishRecovDetail;

          //计划布设
          if (res.data.planLayDetail != null) {
            var d = res.data.planLayDetail, psarr = [];
            for (var k in d) {
              data.forEach(t => {
                if (k == t.gridNumber) {
                  var z = {
                    id: t.gridNumber,
                    name: t.gridNumber + '计划' + d[k],
                    textColor: "#a78839",
                    borderColor: "#ffffff",
                    fillColor: "rgba(41,98,255,0.7)",
//                    data: {
//                      mtl: [
//                        {name: "网格编号", value: t.gridNumber},
//                        {name: "完成情况", value: 0 + '/' + d[k]},
//
//                      ],
//                      id: t.gridNumber,
//                      mediaList: []
//                    },
                    data: {},
                    geojson: t.geojson,

                  }
                  psarr.push(z);
                }
              })
            }
            if (psarr.length != 0) {
              vm.$refs.baseMap.previewshape(psarr, "plantSet");
            }
          }

          //回收完成
          var done = [], ding = [];
          for (let cardId in  res.data.finishRecovDetail) {
            //完成
            if (res.data.finishRecovDetail[cardId] == "done") {
              done.push(cardId)
            }
            //未完成
            if (res.data.finishRecovDetail[cardId] == "doing") {
              ding.push(cardId)
            }
          }
          //计划回收
          var prarr = [], rfinish = [];
          done.forEach(h => {
            res.data.recoverCameraEnvirList.forEach(t => {
              if (t.cameraCardId == h) {
                var z = {
                  id: t.id,
                  name: "",
                  borderColor: "#ffffff",
                  fillColor: "#6200ea",
                  data: {
                    mtl: [
                      {name: "布设点", value: t.layNum},
                      {name: "卡编号", value: t.cameraCardId},
                      {name: "相机型号", value: t.cameraType},
                      {name: "公里网格编号", value: t.oneKmGridNum},
                      {name: "放置时间", value: vm.timeTransition(t.layTimeLong)},
                      {name: "天气", value: t.weather},
                      {name: "计划回收", value: t.planRecovDate},
                      {name: "小地名", value: t.smallLandNum},
                      {name: "布设人员", value: t.layUser},
                      {name: "坡度", value: t.slope},
                      {name: "坡向", value: t.exposure},
                      {name: "生境类型", value: t.envirType},
                      {name: "森林起源", value: t.forestOrigin},
                      {name: "小生境", value: t.smallEnvir},
                      {name: "乔木高度", value: t.qiaomuHeight},
                      {name: "乔木郁闭度", value: t.qiaomuCanopyDensity},
                      {name: "乔木胸径", value: t.qiaomuBraHeight},
                      {name: "乔木优势树种", value: t.arborEdgeSpecies},
                      {name: "灌木高度", value: t.guanmuHeight},
                      {name: "灌木盖度", value: t.guanmuCanopyDensity},
                      {name: "灌木优势树种", value: t.shrubsAdvantageSpecies},
                      {name: "干扰类型", value: t.interfType},
                      {name: "干扰强度", value: t.interfStrength},
                      {name: "干扰频率", value: t.interfRate},
                      {name: "痕迹动物", value: t.traceAnimal},
                      {name: "痕迹类型", value: t.traceType},
                      {name: "总备注", value: t.remark},
                    ],
                    id: t.id,
                    mediaList: vm.incisionStr(t.urlStr)
                  },
                  geojson: {coordinates: [t.eastLongitude, t.northernLatitude], type: "Point"}
                }
                prarr.push(z);
              }
            })
          })
          if (prarr.length != 0) {
            vm.$refs.baseMap.previewshape(prarr, "prarr@Point");
          }

          //完成
          ding.forEach(h => {
            res.data.recoverCameraEnvirList.forEach(t => {
              if (t.cameraCardId == h) {
                var z = {
                  id: t.id,
                  name: "",
                  borderColor: "#ffffff",
                  fillColor: "#00c853",
                  data: {
                    mtl: [
                      {name: "布设点", value: t.layNum},
                      {name: "卡编号", value: t.cameraCardId},
                      {name: "相机型号", value: t.cameraType},
                      {name: "公里网格编号", value: t.oneKmGridNum},
                      {name: "放置时间", value: vm.timeTransition(t.layTimeLong)},
                      {name: "天气", value: t.weather},
                      {name: "计划回收", value: t.planRecovDate},
                      {name: "小地名", value: t.smallLandNum},
                      {name: "布设人员", value: t.layUser},
                      {name: "坡度", value: t.slope},
                      {name: "坡向", value: t.exposure},
                      {name: "生境类型", value: t.envirType},
                      {name: "森林起源", value: t.forestOrigin},
                      {name: "小生境", value: t.smallEnvir},
                      {name: "乔木高度", value: t.qiaomuHeight},
                      {name: "乔木郁闭度", value: t.qiaomuCanopyDensity},
                      {name: "乔木胸径", value: t.qiaomuBraHeight},
                      {name: "乔木优势树种", value: t.arborEdgeSpecies},
                      {name: "灌木高度", value: t.guanmuHeight},
                      {name: "灌木盖度", value: t.guanmuCanopyDensity},
                      {name: "灌木优势树种", value: t.shrubsAdvantageSpecies},
                      {name: "干扰类型", value: t.interfType},
                      {name: "干扰强度", value: t.interfStrength},
                      {name: "干扰频率", value: t.interfRate},
                      {name: "痕迹动物", value: t.traceAnimal},
                      {name: "痕迹类型", value: t.traceType},
                      {name: "总备注", value: t.remark},
                    ],
                    id: t.id,
                    mediaList: vm.incisionStr(t.urlStr)
                  },
                  geojson: {coordinates: [t.eastLongitude, t.northernLatitude], type: "Point"}
                }
                rfinish.push(z);
              }
            })
          })
          if (rfinish.length != 0) {
            vm.$refs.baseMap.previewshape(rfinish, "rfinish_Point");
          }

          //布设完成
          var sfinish = [];
          res.data.layCameraEnvirList.forEach(t => {
            var z = {
              id: t.id,
              name: "",
              borderColor: "#ffffff",
              fillColor: "#00c853",
              data: {
                mtl: [
                  {name: "布设点", value: t.layNum},
                  {name: "卡编号", value: t.cameraCardId},
                  {name: "相机型号", value: t.cameraType},
                  {name: "公里网格编号", value: t.oneKmGridNum},
                  {name: "放置时间", value: vm.timeTransition(t.layTimeLong)},
                  {name: "天气", value: t.weather},
                  {name: "计划回收", value: t.planRecovDate},
                  {name: "小地名", value: t.smallLandNum},
                  {name: "布设人员", value: t.layUser},
                  {name: "坡度", value: t.slope},
                  {name: "坡向", value: t.exposure},
                  {name: "生境类型", value: t.envirType},
                  {name: "森林起源", value: t.forestOrigin},
                  {name: "小生境", value: t.smallEnvir},
                  {name: "乔木高度", value: t.qiaomuHeight},
                  {name: "乔木郁闭度", value: t.qiaomuCanopyDensity},
                  {name: "乔木胸径", value: t.qiaomuBraHeight},
                  {name: "乔木优势树种", value: t.arborEdgeSpecies},
                  {name: "灌木高度", value: t.guanmuHeight},
                  {name: "灌木盖度", value: t.guanmuCanopyDensity},
                  {name: "灌木优势树种", value: t.shrubsAdvantageSpecies},
                  {name: "干扰类型", value: t.interfType},
                  {name: "干扰强度", value: t.interfStrength},
                  {name: "干扰频率", value: t.interfRate},
                  {name: "痕迹动物", value: t.traceAnimal},
                  {name: "痕迹类型", value: t.traceType},
                  {name: "总备注", value: t.remark},
                ],
                id: t.id,
                mediaList: vm.incisionStr(t.urlStr)
              },
              geojson: {coordinates: [t.eastLongitude, t.northernLatitude], type: "Point"}
            }
            sfinish.push(z);
          })
          if (sfinish.length != 0) {
            vm.$refs.baseMap.previewshape(rfinish, "sfinish_Point");
          }
        })()
      },
      //获取时间
      gettimeq(){
        var vm = this;
        (async function () {
          let res = await http.get(api.infrared.planDate, {
            areaId: vm.areaId
          })
          var arr = [];

          for (var k in res.data) {
            var z = {
              label: k,
              value: res.data[k]
            }
            arr.push(z);
          }

          vm.timequantum = arr;
        })()
      },
      gocrb(){
        this.$router.push('/cameraDistribution')
      },
      //切割字符串
      incisionStr(e) {
        if (e != '' && e != '') {
          return e.split("#");
        } else {
          return []
        }
      },
      //时间转换格式
      timeTransition(t) {
        if (t != '') {
          return this.$moment(t).format('YYYY-MM-DD');
        } else {
          return t
        }
      },
    },

  }
</script>
<style scoped>
  @import "../../static/css/nowadaysSetPlan.css";
</style>

<style>
  .el-input__inner {
    height: .4rem;
    line-height: .4rem;
  }
</style>
